import React, { useLayoutEffect, useRef, useState } from "react";

import "./index.css";
import { Button } from "antd";

export default function App() {
  const [show, setShow] = useState(true);
  const boxRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    // 要操作 box 元素的样式
    if (!boxRef.current) return;

    boxRef.current.style.marginTop = "20px";
  }, [show]);

  return (
    <div>
      <Button onClick={() => setShow(!show)}>Toggle</Button>

      <hr />
      {show && <div ref={boxRef} className="box"></div>}
    </div>
  );
}
